<template>
	 <!-- style="position: absolute;width: 100%" -->
     <!-- :style="{'width': zxPageWidth+'px','height':zxPageHeight+'px'}" -->
	<div class="content" >
        <!-- flex:1; -->
		<!-- <div style="flex:1;overflow-y:auto;"> -->
			<ul>
				<li>
					<div class="stores_address">
						<h3><strong>{{storeNow.storeName}}</strong></h3>
						<div>
							<p>{{storeNow.storeInfo}}</p>
							<!--门店介绍-->
						</div>
						<br>
						<!--门店地址-->
						<p><i class="icon njfont nj-dizhi">{{storeNow.address}}</i></p>
						<!--<p>门店配送范围：{{storeNow.deliveryRangeName}}</p>-->
						<!--<p>搜索</p>-->
					</div>
					<!--<div id="searchAddress" style="padding-left: 0.75rem;padding-bottom: 0.3rem;">搜索路线</div>-->
					<div id="stores_map" class="stores_map">
	
					</div>
					<!-- <div id="panel" class="panel"></div> -->
					<div class="stores_address" style="margin-top:0.75rem;margin-bottom:0.75rem;">
						<!--<input type="" name="" id="search-input" style="width: 100%;" />-->
						<h4 style="text-align: left;">门店联系方式</h4>
						<p style="text-align: left;"><strong>{{storeNow.linkman}}</strong>&nbsp;&nbsp;&nbsp;{{storeNow.storeTel}}</p>
						<br>
						<h4 style="text-align: left;">门店交通路线</h4>
						<p style="text-align: left;">{{storeNow.traffic}}</p>
                        <div class="changeStoreBox"  @click="changeStore">
                            切换到该门店
                        </div>
						<!--<p>地铁：2号线XXXXD出口</p>
						<p>公交：56路</p>-->
					</div>
				</li>
			</ul>
		<!-- </div> -->
	</div>
	
</template>

<script>
    // import MyHeader from "../../real-containers/header";
    import { CHANGE_NAVIGATION,CHANGESTORE } from '../../config/postMessage-types';
	import {mapState, mapGetters, mapActions, mapMutations} from 'vuex';
    
	export default {
		props: {
			
		},
		data() {
			return {
				seachWorld: '天安门',
				storeNow: null,
				userLng: null,
				userLat: null,
				flagComplet: false,
				openWindowFlag: false,
				openSimperWindow:true,
                storeRange:null,
                map:null
			}
		},
		components: {
			// "my-header": MyHeader
		},
		computed:{
			...mapGetters('qxz',{
				getBackTrigger: 'getBackTrigger'
            }),
            zxPageHeight(){
				return window.screen.height - 2;
            },
            zxPageWidth(){
				return window.screen.width - 2;
			},
		},
		watch:{
			getBackTrigger(newVal) {
				console.log(this.$refs,'goBackTrigger--------------+++++++++++++>>>>>>>>>>>>>>>>>>>')
				this.map.destroy();
			}
		},
		methods: {
			goDetail() {

            },
            destroyMap(){
                this.map.destroy();
            },
            changeStore(){
                console.log('msgDate',this.storeNow)
                var msgData = {
                    type: CHANGESTORE,
                    params: {
                        storeCode: this.storeNow.storeCode,
                        storeId: this.storeNow.storeId,
                    }
                }
                window.postMessage(JSON.stringify(msgData));
            },
//			getRange(){
//				var range1 = this.storeNow.deliveryRangeCode.match(/\d+/g);
//				var range2 = this.storeNow.deliveryRangeName.match(/\d+/g);
//				if(range1 != null){
//					this.storeRange = Number(range1[0]) * 1000;
//				}else{
//					this.storeRange = Number(range2[0]) * 1000;
//				}
//			},
            myGoBack(){
                this.$router.push("about");
            },
			initMap(){
                var that = this;
				this.map = new AMap.Map('stores_map', {
					zoom: 16,
					center: [this.storeNow.positionLng, this.storeNow.positionLat], //new AMap.LngLat(116.39,39.9)
					resizeEnable: true,
					scrollWheel: true
                });
                // console.log(this.map,'新的地图对象')
				var storeMarker = new AMap.Marker({
					position: [this.storeNow.positionLng, this.storeNow.positionLat], //marker所在的位置
					map: that.map, //创建时直接赋予map属性
					iconStyle: {
		                src: 'static/image/marker.png',
		                style: {
		                    width: '20px',
		                    height: '30px'
		                }
		            },
					label: {
						offset: new AMap.Pixel(-40, 40), //修改label相对于maker的位置
	//					content: "门店位置"
					}
				});
				
							//信息窗体 普通
	//						"地址:" + 
				function openInfoEx() {
	                var info = [];
	                info.push(that.storeNow.storeName + "</div></div>");
	                var infoWindow = new AMap.InfoWindow({
	                    content: info.join("<br/>"),  //使用默认信息窗体框样式，显示信息内容
	                    position: [that.storeNow.positionLng, that.storeNow.positionLat],
	                    offset: new AMap.Pixel(0, -30)
					
	                });
	                infoWindow.open(that.map);
	                return infoWindow;
	            }
				var infoWindow = openInfoEx();
				
	//			storeMarker.on('click',function(){
	//				console.log("点击maker")
	//			})
	//			map.setFitView();
	//			console.log(this.storeRang,'打印方位');
//				var radiusCircle = new AMap.Circle({
//						map: map,
//						radius : that.storeRange,
//						strokeColor : "#ff0000",
//						center : new AMap.LngLat(this.storeNow.positionLng, this.storeNow.positionLat),
//						strokeWeight: 0,
//						fillColor: "#ff0000",
//						fillOpacity : 0.5,
//						zIndex: 1
//					});
				//控制窗体显示影藏
				AMap.event.addListener(storeMarker, 'click', function() {
						
		           		if(that.openSimperWindow){
	//	           			infoWindow.close(map);
							
//							radiusCircle.show();
		           			that.openSimperWindow = false;
		           		}else{
	//	           			infoWindow.open(map);
//							radiusCircle.hide();
		           			that.openSimperWindow = true;
		           		}
		        });	
	//			radiusCircle.on('click',function(){
	//				radiusCircle.hide();
	//			})
	
				that.map.plugin(['AMap.Geolocation', 'AMap.ToolBar', 'AMap.LngLat', 'AMap.AdvancedInfoWindow', 'AMap.Autocomplete', 'AMap.PlaceSearch'], function() {
					var userGeolocation = new AMap.Geolocation({
						enableHighAccuracy: true, //是否使用高精度定位，默认:true
						timeout: 10000, //超过10秒后停止定位，默认：无穷大
						maximumAge: 0, //定位结果缓存0毫秒，默认：0
						convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
						showButton: true, //显示定位按钮，默认：true
						buttonPosition: 'LB', //定位按钮停靠位置，默认：'LB'，左下角
						buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
						showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
						showCircle: false, //定位成功后用圆圈表示定位精度范围，默认：true
						panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
						zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
						markerOptions: {
							label: {
								offset: new AMap.Pixel(-40, 40), //修改label相对于maker的位置
								content: "您的位置"
							}
						}
					});
//					map.addControl(new AMap.ToolBar());
					that.map.addControl(userGeolocation);
					userGeolocation.getCurrentPosition();
					AMap.event.addListener(userGeolocation, 'complete', function(result) {
						console.log(result, '定位成功返回结果');
						that.map.setFitView();
						that.userLng = result.position.getLng();
						that.userLat = result.position.getLat();
						console.log(that.userLng, that.userLat,'定位经纬度')
						console.log(Number(that.storeNow.positionLng), Number(that.storeNow.positionLat),'门店经纬度')
						//构造路线导航类
						// AMap.service('AMap.Driving', function() { //回调函数
						// 	//实例化Driving
						// 	var driving = new AMap.Driving({
						// 		// map: map,
                        //         panel: "panel",
						// 	});
                        //     driving.search(new AMap.LngLat(that.userLng, that.userLat), new AMap.LngLat(that.storeNow.positionLng, that.storeNow.positionLat));
                        // })
                        
//						步行的路线规划
//					    AMap.service('AMap.Walking',function(){//回调函数
//						    //实例化Walking
//						    var walking = new AMap.Walking({
//						        map: map,
//						        panel: "panel"
//						    }); 
//						    walking.search([116.399028, 39.845042], [116.436281, 39.880719]);
//						})
						
						
						
						//信息窗体  带搜索
						var lnglat = [that.userLng, that.userLat];
						var content = '<div class="info-title" style="background: #FC454C;"><span style="padding-left: 0.3rem;">高德地图</span></div><div class="info-content">';
						var infowindow1 = new AMap.AdvancedInfoWindow({
							content: content,
							offset: new AMap.Pixel(0, -30)
						});
						that.flagComplet = true; // 地图加载完成标志
						//搜索按鈕實現代碼
						
//						var seach = document.getElementById("searchAddress");
//						seach.onclick = function() {
//							if(that.openWindowFlag) {
//								infowindow1.open(map, lnglat);
//								that.openWindowFlag = false;
//							} else {
//								infowindow1.close(map, lnglat);
//								that.openWindowFlag = true;
//							}
//
//						}

					}); //返回定位信息
					AMap.event.addListener(userGeolocation, 'error', function(err) {
						console.log('定位失败', err);
					}); //返回定位出错信息

					//公交的路线规划
					//				var drivingOption = {
					//					map: map,
					////					city: '北京市',
					//					policy: AMap.TransferPolicy.LEAST_TIME
					//				};
					//				var transfer = new AMap.Transfer(drivingOption); //构造驾车导航类
					////				根据起终点坐标规划驾车路线
					//				transfer.search([{
					//					keyword: '软件基地',
					//					city: '0755'
					//				}, {
					//					keyword: '深圳大学',
					//					city: '0755'
					//				}], function(status, result) {
					//					console.log(result, '456');
					//				});

					//				搜索框
					//				var drivingOption = {
					//					map: map
					//				};

					//				var walking = new AMap.Walking(drivingOption); //构造驾车导航类
					//根据起终点坐标规划驾车路线
					//				walking.search([{
					//					keyword: '首开广场',
					//					city: '010'
					//				}, {
					//					keyword: '绿地中心',
					//					city: '010'
					//				}], function(status, result) {
					//					
					//				});

					//				var auto = new AMap.Autocomplete ({
					//					input: 'search-input'
					//				});
					//				var placeSearch = new AMap.PlaceSearch({ //构造地点查询类
					//					pageSize: 5,
					//					pageIndex: 1,
					//					city: "010", //城市
					//					map: map,
					//					panel: "panel"
					//				});
					//关键字查询
					//				placeSearch.search();
					//				
					//				placeSearch.on('complete',function(res){
					//					console.log('搜索成功')
					//				})
					//				
					//				AMap.event.addListener(auto, 'select', function (e) {
					//					console.log(e,'所艘啊啊 ')
					//					placeSearch.setCity(e.poi.adcode);
					//					placeSearch.search(e.poi.name);
					//				});
					//				map.setFitView();	
					//				var lnglat = new AMap.LngLat(116.368904, 39.923423);
					//				console.log(lnglat.distance([116.387271, 39.922501]),'两点之间的距离');	

				});
			},
			initScript() {
				//判断如果有script就删掉
				if (document.querySelector("#amap-box")){
					document.body.removeChild(document.querySelector("#amap-box"));
				}
				let amapBox = document.createElement("div");
				amapBox.setAttribute("id", "amap-box");
				let script1 = document.createElement("script");
				script1.onload = () => {
					console.log("地图加载完毕");
					let script2 = document.createElement("script");
					script2.onload = () => {
                        console.log("script2加载完毕");
                        setTimeout(() => {
                            this.initMap();
                        },500)
					}
					script2.src = "//webapi.amap.com/ui/1.0/main.js";
					amapBox.insertAdjacentElement("beforeend", script2);
				};
				script1.src = "https://webapi.amap.com/maps?v=1.3&key=9bfe3d8b8882b7d3e4c23e43d38b18ba";
				amapBox.insertAdjacentElement("beforeend", script1);
				document.body.appendChild(amapBox);
			},

		},
		created() {
			this.storeNow = this.$route.query.store;
            let titleConfig = JSON.stringify({
                type: CHANGE_NAVIGATION,
                params: {
                    title: this.storeNow.storeName
                }
            })
            window.postMessage(titleConfig)
		},
		mounted() {
			this.initScript();
		},
		beforeDestory(){
            // 处理抖动问题
            // document.querySelector("body").removeChild(document.querySelectorAll(".panel"));            
			if(document.querySelectorAll(".amap-sug-result")){
				document.querySelector("body").removeChild(document.querySelectorAll(".amap-sug-result"));
            }
		},
	}
</script>

<style scoped="scoped">
	.aui-searchbar,
	.aui-bar-nav {
		position: static;
	}
	.content {
	    /* width: 100%;
	    height: 100%;
	    display: flex;
	    flex-direction: column;
	    justify-content: space-between;
	    text-align: left; */
        height: 100%;
        position:absolute;
        top:0;
        left:0;
        width: 100%;
        /* margin-top: 1.5rem; */
        overflow-y:scroll;
	}
	.stores_map {
		margin: 0 0.75rem;
		background: #ffffff;
		border: 1px solid #eaeaea;
		height: 60vw;
	}
	
	.panel {
		width: 100%;
		padding: 0 0.75rem;
	}
    .changeStoreBox {
        padding: 0.3rem;
        background: #ef5423;
        color:#fff;
        margin-top: 1rem;
        text-align: center;
    }
    .stores_address{
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
</style>